<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>history.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
  </script>

  <script src="static/js/doc.js">
  </script>

  <meta charset="utf8">
</head>

<body onload="prettyPrint()">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">history.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    Browser history stack management class.

 The goog.History object allows a page to create history state without leaving
 the current document. This allows users to, for example, hit the browser&#39;s
 back button without leaving the current page.

 The history object can be instantiated in one of two modes. In user visible
 mode, the current history state is shown in the browser address bar as a
 document location fragment (the portion of the URL after the &#39;#&#39;). These
 addresses can be bookmarked, copied and pasted into another browser, and
 modified directly by the user like any other URL.

 If the history object is created in invisible mode, the user can still
 affect the state using the browser forward and back buttons, but the current
 state is not displayed in the browser address bar. These states are not
 bookmarkable or editable.

 It is possible to use both types of history object on the same page, but not
 currently recommended due to browser deficiencies.

 Tested to work in:
 <ul>
 <li>Firefox 1.0-3.6</li>
 <li>Internet Explorer 5.5-8.0</li>
 <li>Opera 9</li>
 <li>Safari 1.3-2.0, but not very well.</li>
 </ul>

 Shipping versions of Safari are incapable of creating and then reading
 history states due to a browser bug. The bugs have been fixed in Webkit
 nightly builds (tested on version 420+.) Older Safaris still fire the same
 navigation events as other browsers while browsing forward, but creates dead
 history states for going backward. Unfortunately, replacing the location
 does not seem to help, the history states are created anyway.
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="../demos/history1.html">Demo</a></li>
            <li><a href="../demos/history2.html">Demo</a></li>
            <li><a href="closure_goog_history_history.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">history/history.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_History.html">
          goog.History</a><br/>
        <div class="class-details">A history management object. Can be instantiated in user-visible mode (uses
the address fragment to manage state) or in hidden mode. This object should
be created from a script in the document body before the document has
finished loading.

To store the hidden states in browsers other than IE, a hidden iframe is
used. It must point to a valid html page on the same domain (which can and
probably should be blank.)

Sample instantiation and usage:

<pre class="lang-js">
// Instantiate history to use the address bar for state.
var h = new goog.History();
goog.events.listen(h, goog.History.EventType.NAVIGATE, navCallback);
h.setEnabled(true);

// Any changes to the location hash will call the following function.
function navCallback(e) {
alert(&#39;Navigated to state &quot;&#39; + e.token + &#39;&quot;&#39;);
}

// The history token can also be set from code directly.
h.setToken(&#39;foo&#39;);
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_History_Event.html">
          goog.History.Event</a><br/>
        <div class="class-details">Event object dispatched after navigation events.</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>





  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.History.HAS_ONHASHCHANGE_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">HAS_ONHASHCHANGE_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
     </div>


     <div class="entryOverview">
       Whether the browser supports HTML5 history  management.
{@link <a href="http://www.w3.org/TR/html5/history.html">http://www.w3.org/TR/html5/history.html</a>}.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line408">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.History.IFRAME_SOURCE_TEMPLATE_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">IFRAME_SOURCE_TEMPLATE_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       Minimal HTML page used to populate the iframe in Internet Explorer. The title
is visible in the history dropdown menu, the iframe state is stored as the
body innerHTML.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line907">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.History.IFRAME_TEMPLATE_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">IFRAME_TEMPLATE_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       HTML template for an invisible iframe.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line915">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.History.INPUT_EVENTS_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">INPUT_EVENTS_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></span>.&lt;<span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&gt;</div>
     </div>


     <div class="entryOverview">
       List of user input event types registered in Opera to restart the history
timer (@see goog.History#operaDefibrillator_).
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line895">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.History.INPUT_TEMPLATE_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">INPUT_TEMPLATE_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       HTML template for an invisible named input element.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line923">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.History.historyCount_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.History.</span><span class="entryName">historyCount_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       Counter for the number of goog.History objects that have been instantiated.
Used to create unique IDs.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_history_history.js.source.html#line933">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory history</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="closure/goog" current="history/history.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
